<template>
  <div id="page">
    <!-- 截图区域 -->
    <div class="content" ref="content">
      <el-descriptions
          class="margin-top"
          title="配送单"
          :column="1"
          :size="size"
          border
          style="margin-bottom: 50px"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Guide /></el-icon>
              配送单号
            </div>
          </template>
          {{data.distributionTaskOrderId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              客户姓名
            </div>
          </template>
          {{data.customerName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              联系电话
            </div>
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Message /></el-icon>
              邮编
            </div>
          </template>
          {{data.addressId}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              配送地址
            </div>
          </template>
          {{data.address}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template #label>
            <div class="cell-item">
              <el-icon><Timer /></el-icon>
              配送日期
            </div>
          </template>
          {{data.overTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              备注
            </div>
          </template>
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Goods /></el-icon>
              商品名称
            </div>
          </template>
          苹果
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Coin /></el-icon>
              单价
            </div>
          </template>
          100
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><ShoppingCartFull /></el-icon>
              商品数量
            </div>
          </template>
          100
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><Link /></el-icon>
              任务类型
            </div>
          </template>
          100
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><EditPen /></el-icon>
              客户签名
            </div>
          </template>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 点击调用方法获取截图 -->
    <el-button type="primary" @click="getPrintScreen">获取截图</el-button>
    <div class="img-box">
      <h2>截图结果:</h2>
      <!-- 通过img标签把获取到的截图呈现出来 -->
      <img :src="imgUrl" alt="" />
    </div>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
export default {
  name: "GetImg",
  data() {
    return {
      imgUrl: null, //截图地址
      data:[]
    };
  },
  methods: {
    //获取截图方法
    getPrintScreen() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.content, {
        // width: 30, //截图宽度
        // height: 50, //截图高度
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
        this.imgUrl = url;
      });
    },
  },
  created() {
    this.data = JSON.parse(sessionStorage.getItem('data'))

  }
};
</script>


<!-- 本demo样式代码（不重要） -->
<style >

</style>
